<template>
  <div class="page-view">
    <van-tabs
      color="#04CABC"
      title-active-color="#333333"
      :line-height="3"
      :line-width="activeBarWidth"
      class="tabs-view"
      @click="onSwitchTabs"
    >
      <van-tab
        title="班级"
        class="class-tab"
      >
        <van-list
          v-if="ClassList.length > 0"
          v-model="loading"
          class="class-list"
          :finished="finished"
          @load="getCollectionClassList"
        >
          <van-swipe-cell
            v-for="item in ClassList"
            :key="item.ClassId"
            :right-width="55"
            :on-close="onClose"
          >
            <collectionClass
              :item="item"
            />
            <span
              slot="right"
              class="right-x"
            >
              删除
            </span>
          </van-swipe-cell>
        </van-list>
        <div
          v-else-if="ClassList.length <= 0 && finished"
          class="nodata"
        >
          <NoData>暂时没有收藏的信息</NoData>
        </div>
      </van-tab>
      <van-tab
        title="模拟考试"
      >
        <CollectionOrWrong
          v-if="mockExamList.length > 0"
          :course-list="mockExamList"
          :active-course-id="mockExamId"
          :type="1"
          :is-collect="1"
        />
        <div
          v-else-if="mockExamList.length <= 0 && isFinished_mock"
          class="nodata"
        >
          <NoData>暂时没有收藏的信息</NoData>
        </div>
      </van-tab>
      <van-tab
        title="历年真题"
      >
        <CollectionOrWrong
          v-if="realExamList.length > 0"
          :course-list="realExamList"
          :active-course-id="realExamId"
          :type="1"
          :is-collect="1"
        />
        <div
          v-else-if="realExamList.length <= 0 && isFinished_real"
          class="nodata"
        >
          <NoData>暂时没有收藏的信息</NoData>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    NoData: () => import('components/Class/NoData.vue'),
    CollectionOrWrong: () => import('components/Mine/CollectionOrWrong.vue'),
    collectionClass: () => import('components/Class/CollectionClass.vue'),
  },
  data () {
    return {
      activeBarWidth: Math.floor(document.documentElement!.clientWidth / 3),
      ClassList: [] as any, // 收藏班级
      realExamList: [], // 收藏真题
      realExamId: '',
      isFinished_real: false,
      mockExamList: [], // 收藏模拟考试
      mockExamId: '',
      isFinished_mock: false,
      pageSize: 6,
      pageNum: 1,
      loading: true,
      finished: false,
    }
  },
  created () {
    this.getCollectionClassList()
  },
  methods: {
    onSwitchTabs (index:any, title:any) {
      if (index !== 0) {
        this.getCollectionPaperList(index)
      }
    },
    // 获取收藏的班级列表
    getCollectionClassList () {
      this.finished = false
      this.$axios({
        method: 'get',
        url: 'user/GetCourseCollectionList',
        data: {
          Page: this.pageNum,
          PageSize: this.pageSize,
        },
      }).then(res => {
        this.$set(this.$data, 'ClassList',
          [...this.ClassList, ...res.ClassList])
        this.loading = false

        if (this.pageSize >= res.TotalPage) {
          this.finished = true
        } else {
          this.pageNum++
        }
      })
    },
    // 获取收藏的试卷
    getCollectionPaperList (type: number) {
      this.$axios({
        method: 'get',
        url: 'Exam/GetCollectExamPaperListForH5',
        data: {
          PaperType: type,
          ClassId: 0, // 接口加ClassId，但没法获取
        },
      }).then(res => {
        if (type === 1) {
          this.mockExamList = res.CourseList
          if (res.CourseList.length > 0) {
            this.mockExamId = res.CourseList[0].CourseId
          }
          this.isFinished_mock = true
        } else {
          this.realExamList = res.CourseList
          if (res.CourseList.length > 0) {
            this.realExamId = res.CourseList[0].CourseId
          }
          this.isFinished_real = true
        }
      })
    },
    // 取消收藏班级
    onClose (clickPosition: any, instance: any) {
      switch (clickPosition) {
        case 'outside':
          instance.close()
          break
        case 'right':
          const curClassId = instance.$children[0].item.ClassId
          this.$dialog.confirm({
            message: '确定删除吗？',
          }).then(() => {
            // 取消收藏
            this.$axios({
              url: 'user/CollectionOperation',
              data: {
                ClassId: curClassId,
                Type: 2,
              },
            }).then(res => {
              instance.close()
              this.removeNoCollectClass(curClassId)
              this.$toast({ message: '取消收藏成功！', duration: 1000 })
            }, e => {
              this.$toast({ message: '取消收藏失败！', duration: 1000 })
            })
          })
          break
      }
    },
    // 移除取消收藏的班级
    removeNoCollectClass (classId:any) {
      for (let i = 0; i < this.ClassList.length; i++) {
        if (this.ClassList[i].ClassId === classId) {
          this.ClassList.splice(i, 1)
        }
      }
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.tabs-view{
  /deep/ .van-tabs--line .van-tabs__wrap {
    height: 97px;
  }
  /deep/ .van-ellipsis {
    font-size: 32px;
  }
}
.class-list {
  /deep/ .van-swipe-cell {
    margin-bottom: 40px;
  }
}
.class-tab {
  padding-top: 40px;
}
.right-x {
  display: inline-block;
  width: 110px;
  height: 150px;
  font-size: 30px;
  line-height: 150px;
  color: #fff;
  text-align: center;
  background-color: #CC3300;
}
.nodata {
  text-align: center;
  margin-top: 240px;
}
</style>
